<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            1.传统事件绑定
                1>重复添加，覆盖
                2>不能精确的删除事件上的某一个函数
            2.事件监听器 低版本IE8不兼容(attachEvent("on"+evenType,funcName)   detachEvent("on"+eventType,funcName))
                addEventListener()
                    node.addEventListener('click') 
                        第一个参数：事件类型，
                        第二个参数：绑定函数，
                        第三个参数：布尔值 true 事件捕获  false 事件冒泡 默认
                 removeEventListener()
                    node.removeEventListener 
                        第一个参数：事件类型，
                        第二个参数：删除函数的名字，
        */
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            // 传统的
            // oBtn.onclick = function(){
            //     alert("点击1");
            // }
            // oBtn.onclick = function(){
            //     alert("点击2");
            // }
            oBtn.addEventListener("click",function(){
                alert("点击1");
            },false)
            oBtn.addEventListener("click",function(){
                alert("点击2");
            },false)

            var aBtns = document.getElementsByTagName("button");
            // aBtns[2].onclick = function(){
            //     alert("原有的点击函数");
            // }
            // aBtns[1].onclick = function(){
            //     aBtns[2].onclick = show;
            // }
            // aBtns[3].onclick = function(){
            //     aBtns[2].onclick = null;
            // }
            aBtns[2].addEventListener("click",function(){
                alert("原有的点击函数");
            },false)
            aBtns[1].onclick = function(){
                aBtns[2].addEventListener("click",show,false);
            }
            aBtns[3].onclick = function(){
                aBtns[2].removeEventListener("click",show);
            }
            function show(){
                alert("hello word")
            }
        }
    </script>
</head>
<body>
    <button id="btn">按钮</button>

    <button>添加函数</button>
    <button>按钮</button>
    <button>删除函数</button>
</body>
</html>